<template>
  <div class="bg">
    <LoginHeader title="盛邦升华考试平台注册页"></LoginHeader>
    <section class="content">
      <div class="content-left item">
        <div class="desc">
          <h3>登陆说明：</h3>
          <p>●账号设置：账号注册成功后即为个人使用 禁止一账号多人使用</p>
          <p>
            ●忘记密码设置：直接对该账号密码进行重置 且需要该账号拥有者的认证
          </p>
        </div>
        <!-- <LoginClues v-slot: registerclues></LoginClues> -->
      </div>
      <div class="content-right item">
        <div class="tab">
          <LoginTab
            :list="tabList"
            @handleChangeActiveEvent="handleChangeActiveEvent"
          ></LoginTab>
          <div class="tab-content">
            <LoginForm
              v-for="(item, index) in tabList"
              :key="index"
              :formConfig="item.studentConfig"
              :title="item.name"
              v-show="item.isActive"
              :class="{
                'form-register-teacher': item.name === '教师注册',
                'form-register-student': item.name === '学员注册',
              }"
            >
              <template v-slot:formExtends>
                <div
                  class="form-group validate-code"
                  v-if="item.name === '教师注册'"
                >
                  <input
                    type="text"
                    name="validateCode"
                    placeholder="请输入短信验证码"
                  />
                  <a href="/发送验证码" class="btn-vali-code">获取验证码</a>
                </div>
                <span v-else></span>
              </template>
              <template v-slot:btn>提交注册</template>
            </LoginForm>
          </div>
        </div>
      </div>
    </section>
    <LoginFooter />
  </div>
</template>
<script>
// 引入组件
import LoginHeader from "../components/login/LoginHeader.vue";
import LoginFooter from "../components/login/LoginFooter.vue";
import LoginForm from "../components/login/LoginForm.vue";
import LoginTab from "../components/login/LoginTab.vue";
export default {
  components: {
    LoginHeader,
    LoginFooter,
    LoginForm,
    LoginTab,
  },
  data() {
    return {
      isShow: false,
      tabList: [
        {
          isActive: false,
          name: "学员注册",
          studentConfig: [
            {
              type: "text",
              name: "username",
              placeholder: "请输入名称",
              iconUrl: "./images/yonghu.svg",
            },
            {
              type: "text",
              name: "username",
              placeholder: "请输入学号",
              iconUrl: "./images/yonghu.svg",
            },
            {
              type: "password",
              name: "userpassword",
              placeholder: "请设置密码并记住",
              iconUrl: "./images/suo.svg",
            },
            {
              type: "text",
              name: "phone",
              placeholder: "请输入身份证号",
              iconUrl: "./images/shouji.svg",
            },
          ],
        },
        {
          isActive: true,
          name: "教师注册",
          studentConfig: [
            {
              type: "text",
              name: "username",
              placeholder: "请输入用户名",
              iconUrl: "./images/yonghu.svg",
            },
            {
              type: "password",
              name: "userpassword",
              placeholder: "请输入密码",
              iconUrl: "./images/suo.svg",
            },
            {
              type: "text",
              name: "phone",
              placeholder: "请输入手机号",
              iconUrl: "./images/shouji.svg",
            },
          ],
        },
      ],
    };
  },
  methods: {
    handleChangeActiveEvent(index) {
      for (let i = 0; i < this.tabList.length; i++) {
        this.tabList[i].isActive = false;
      }
      this.tabList[index].isActive = true;
    },
    showStudentForm() {
      this.isShow = true;
    },
    showTeacherForm() {
      this.isShow = false;
    },
  },
};
</script>

<style>
@import url("../assets/css/login.css");
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.validate-code {
  position: relative;
}
.validate-code input {
  width: 100%;
  height: 30px;
  border: 1px solid #e0eff9;
  background-color: #a0d5de;
  padding-left: 5px;
}
.validate-code .btn-vali-code {
  position: absolute;
  right: 1px;
  top: 1px;
  line-height: 28px;
  background-color: #033887;
  width: 130px;
  text-align: center;
  color: white;
  text-decoration: none;
}
</style>
